import React, { useEffect, useState } from 'react';
import { Modal, Form, Input, Checkbox, Select, Button, Table } from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';

interface FieldInfo {
    add: boolean;
    annotation: string;
    description: string;
    field: string;
    query: boolean;
    rpcType: string;
    type: string;
    update: boolean;
}

interface FieldConfigModalProps {
    visible: boolean;
    onCancel: () => void;
    onSubmit: (fieldInfoList: FieldInfo[]) => void;
    initialValues?: FieldInfo[];
}

const FieldConfigModal: React.FC<FieldConfigModalProps> = ({ visible, onCancel, onSubmit, initialValues }) => {
    const [form] = Form.useForm();
    const [fieldInfoList, setFieldInfoList] = useState<FieldInfo[]>(initialValues || [
        {
            add: true,
            annotation: '',
            description: '',
            field: '',
            query: true,
            rpcType: '',
            type: '',
            update: true,
        },
    ]);

    useEffect(() => {
        if (initialValues) {
            setFieldInfoList(initialValues);
        }
    }, [initialValues]);

    const handleAddField = () => {
        setFieldInfoList([
            ...fieldInfoList,
            {
                add: true,
                annotation: '',
                description: '',
                field: '',
                query: true,
                rpcType: '',
                type: '',
                update: true,
            },
        ]);
    };

    const handleRemoveField = (index: number) => {
        const newFieldInfoList = fieldInfoList.filter((_, i) => i !== index);
        setFieldInfoList(newFieldInfoList);
    };

    const handleFinish = () => {
        form.validateFields().then((values) => {
            onSubmit(fieldInfoList);
        });
    };

    const columns = [
        {
            title: '字段名',
            dataIndex: 'field',
            render: (text: string, record: FieldInfo, index: number) => (
                <Form.Item name={['fields', index, 'field']} initialValue={text} rules={[{ required: true, message: '请输入字段名' }]}>
                    <Input onChange={(e) => (fieldInfoList[index].field = e.target.value)} />
                </Form.Item>
            ),
        },
        {
            title: '描述',
            dataIndex: 'description',
            render: (text: string, record: FieldInfo, index: number) => (
                <Form.Item name={['fields', index, 'description']} initialValue={text}>
                    <Input onChange={(e) => (fieldInfoList[index].description = e.target.value)} />
                </Form.Item>
            ),
        },
        {
            title: '注解',
            dataIndex: 'annotation',
            render: (text: string, record: FieldInfo, index: number) => (
                <Form.Item name={['fields', index, 'annotation']} initialValue={text}>
                    <Input onChange={(e) => (fieldInfoList[index].annotation = e.target.value)} />
                </Form.Item>
            ),
        },
        {
            title: '类型',
            dataIndex: 'type',
            render: (text: string, record: FieldInfo, index: number) => (
                <Form.Item name={['fields', index, 'type']} initialValue={text}>
                    <Select onChange={(value: string) => (fieldInfoList[index].type = value)}
                            options={[
                                { value: 'string', label: 'String' },
                                { value: 'Integer', label: 'Integer' },
                                { value: 'boolean', label: 'Boolean' },
                                { value: 'LocalDateTime', label: 'LocalDateTime' },
                            ]}
                    >
                    </Select>
                </Form.Item>
            ),
        },
        {
            title: '添加',
            dataIndex: 'add',
            render: (text: boolean, record: FieldInfo, index: number) => (
                <Form.Item name={['fields', index, 'add']} valuePropName="checked" initialValue={text}>
                    <Checkbox onChange={(e) => (fieldInfoList[index].add = e.target.checked)} />
                </Form.Item>
            ),
        },
        {
            title: '查询',
            dataIndex: 'query',
            render: (text: boolean, record: FieldInfo, index: number) => (
                <Form.Item name={['fields', index, 'query']} valuePropName="checked" initialValue={text}>
                    <Checkbox onChange={(e) => (fieldInfoList[index].query = e.target.checked)} />
                </Form.Item>
            ),
        },
        {
            title: '更新',
            dataIndex: 'update',
            render: (text: boolean, record: FieldInfo, index: number) => (
                <Form.Item name={['fields', index, 'update']} valuePropName="checked" initialValue={text}>
                    <Checkbox onChange={(e) => (fieldInfoList[index].update = e.target.checked)} />
                </Form.Item>
            ),
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (_, __, index: number) => (
                <Button type="link" icon={<DeleteOutlined />} onClick={() => handleRemoveField(index)}>
                    删除
                </Button>
            ),
        },
    ];

    return (
        <Modal
            visible={visible}
            title="对象属性配置"
            width={1500}
            onCancel={onCancel}
            footer={[
                <Button key="cancel" onClick={onCancel}>
                    取消
                </Button>,
                <Button key="submit" type="primary" onClick={handleFinish}>
                    提交
                </Button>,
            ]}
        >
            <Form form={form} layout="vertical">
                <Table
                    columns={columns}
                    dataSource={fieldInfoList}
                    pagination={false}
                    rowKey={(record, index) => index.toString()}
                    scroll={{ y: 600 }}
                />
                <Button type="dashed" onClick={handleAddField} style={{ width: '100%', marginTop: 16 }}>
                    <PlusOutlined /> 添加字段
                </Button>
            </Form>
        </Modal>
    );
};

export default FieldConfigModal;